<template>
  <div class="index">
    <div class="index_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">信息修改<i class="el-icon-close"></i></div>
    </div>
    <div class="index_title">
      <div class="index_title_left"><i>基础信息</i></div>
    </div>
    <div class="index_content">
      <h3>公开信息</h3>
      <div class="index_content_box">
        <form>
          <div class="form_image">
            <div class="form_image_left">
              <div class="form_image_left_left">店铺logo</div>
              <div class="form_image_left_right">
                <input type="file"
                       title=" "
                       class="files"
                       @change="handerFile">
                <div class="files_img">
                  <img :src="images"
                       :onerror="defaultErrorImageSrc">
                </div>
              </div>
            </div>
            <div class="form_image_right">
              <div class="form_image_right_left">店铺背景图</div>
              <div class="form_image_right_right">
                <input type="file"
                       title=" "
                       class="filess"
                       @change="handerFiles">
                <div class="filess_img">
                  <img :src="imgs"
                       :onerror="defaultErrorImageSrcs">
                </div>
              </div>
            </div>
          </div>
          <div class="form_name">
            <div class="form_name_left">店铺名称</div>
            <div class="form_name_right">伊森家居<i>申请更改</i></div>
          </div>
          <div class="form_address">
            <div class="form_address_left">店铺地址</div>
            <div class="form_address_right">桂林市象山区人民路23号<i>申请更改</i></div>
          </div>
          <div class="form_twos">
            <div class="form_twos_photo">
              <div class="form_twos_photo_left">店铺电话</div>
              <div class="form_twos_photo_right">
                <input type="text"
                       v-model="modify.photo">
              </div>
            </div>
            <div class="form_twos_lable">
              <div class="form_twos_lable_left">店铺标签</div>
              <div class="form_twos_lable_right">
                <input type="text"
                       v-model="modify.lables">
              </div>
            </div>
          </div>
          <div class="form_introduct">
            <div class="form_introduct_left"><i>简</i><i>介</i></div>
            <div class="form_introduct_right">
              <textarea></textarea>
            </div>
          </div>
        </form>
        <div class="btn">
          <button>提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      images: '',
      imgs: '',
      defaultErrorImageSrc: "this.src = '" + require('@/assets/logo.png') + "'",
      defaultErrorImageSrcs: "this.src = '" + require('@/assets/logo.png') + "'",
      modify: {
        logo: '',
        ground: '',
        photo: '',
        lables: [],
      },
    }
  },
  methods: {
    handerFile (e) {
      let file = e.target.files[0];
      this.modify.logo = file.name;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (v) => {
        console.log(v);
        this.images = v.target.result;
        console.log(this.images);
      }
    },
    handerFiles (e) {
      let file = e.target.files[0];
      this.modify.ground = file.name;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = (v) => {
        console.log(v);
        this.imgs = v.target.result;
      }
    },
  },
}
</script>

<style lang="less" scoped="scoped">
@import "index.less";
</style>
